<template>
  <!--步骤条-组件-->
  <div class="step-group" :style="{'--height': totalHeight+unit,'--width':totalWidth+unit,'--stepBorderColor':stepBorderColor}">
    <div class="step-item" v-for="(item,index) in stepList"

         :class="{'current-step':currentStep-1>=index&&stepList.length-1!=index,
             'current-step-n':currentStep-1<index&&stepList.length-1!=index,
             'last-step':currentStep-1>=index&&stepList.length-1==index}"

         :style="{'--height': totalHeight+unit,'--itemWidth':itemWidth+unit,
             '--triangle':-totalHeight+unit,'--line':-totalHeight-lienWidth+unit,
              '--triangleBorder':totalHeight/2+unit,
              '--processingFontColor':processingFontColor,'--processingFontColorN':processingFontColorN,
              '--processingBackground':processingBackground,'--stepBackground':stepBackground,'--lienColor':lienColor
             }">

      {{item}}

    </div>


  </div>
</template>

<script setup>
import {
  vue,
  vsuiapi,
  mixin,
  eventDefine,
  eventBus,
  runtimeCfg,
  axios
}
from '@core';
const props = defineProps({
    totalHeight: {//步骤条总高度
      type: Number,
      default: 32
    },
    unit: {//单位
      type: String,
      default: 'px'
    },
    stepList: {//步骤内容
      type: Array,
      default: ["步骤1", "步骤2", "步骤3"]
    },
    currentStep: {//当前步骤
      type: Number,
      default: 1
    },
    lienWidth: {//线条宽度
      type: Number,
      default: 1
    },
    stepBackground: {//步骤条背景色
      type: String,
      default: '#fff'
    },
    stepBorderColor: {//步骤边框色
      type: String,
      default: '#e5e5e5'
    },
    lienColor: {//线条颜色
      type: String,
      default: "#e5e5e5"
    },
    processingFontColor: {//进行中字体颜色
      type: String,
      default: '#fff'
    },
    processingFontColorN: {//未进行字体颜色
      type: String,
      default: '#767676'
    },
    processingBackground: {//进行中背景颜色
      type: String,
      default: '#1677ff'
    }
})

</script>

<style scoped>
.step-group {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  height: var(--height);
  display: flex;
  justify-content: flex-start;
  align-content: center;
  border: 1px var(--stepBorderColor) solid;
  border-radius: 4px;
  background: var(--stepBackground);
}
.step-group .step-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--height);
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: var(--processingFontColorN);
    line-height: 28px;
    position: relative;
    background: var(--stepBackground);
    padding:0 30px;
  }

  .step-group .current-step {
    background: var(--processingBackground);
    color: var(--processingFontColor);
  }


  .step-group .current-step:before {
    position: absolute;
    right: var(--triangle);
    display: block;
    content: '';
    z-index: 12;
    border-right: var(--triangleBorder) solid transparent;
    border-top: var(--triangleBorder) solid transparent;
    border-bottom: var(--triangleBorder) solid transparent;
    border-left: var(--triangleBorder) solid var(--processingBackground);
  }

  .step-group .current-step:after {
    position: absolute;
    right: var(--line);
    top: 0rem;
    display: block;
    content: '';
    z-index: 10;
    border-right: var(--triangleBorder) solid transparent;
    border-top: var(--triangleBorder) solid transparent;
    border-bottom: var(--triangleBorder) solid transparent;
    border-left: var(--triangleBorder) solid var(--lienColor);
  }

  .step-group .current-step-n:before {
    position: absolute;
    right: var(--triangle);
    display: block;
    content: '';
    z-index: 12;
    border-right: var(--triangleBorder) solid transparent;
    border-top: var(--triangleBorder) solid transparent;
    border-bottom: var(--triangleBorder) solid transparent;
    border-left: var(--triangleBorder) solid var(--stepBackground);
  }

  .step-group .current-step-n:after {
    position: absolute;
    right: var(--line);
    top: 0rem;
    display: block;
    content: '';
    z-index: 10;
    border-right: var(--triangleBorder) solid transparent;
    border-top: var(--triangleBorder) solid transparent;
    border-bottom: var(--triangleBorder) solid transparent;
    border-left: var(--triangleBorder) solid var(--lienColor);
  }

  .step-group .last-step {
    background: var(--processingBackground);
    color: var(--processingFontColor);
  }
</style>